<template>
	<view class="b_width hui">
		<view class="form_box" v-if="!info.id">

			<view class="xx_box">

				<view class="xx_title">请填写您的身份信息</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">姓名</view>
					</view>
					<input v-model="form.name" class="i_right" placeholder="请输入您的姓名"
						placeholder-style="color:#CECECE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">手机号</view>
					</view>
					<input v-model="form.mobile" class="i_right" placeholder="请输入手机号"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>


				<view class="b_flex_c input_box" @click="groupShow=true">
					<view class="b_flex_c left">
						<view class="">工种类型</view>
					</view>
					<input v-model="groups" class="i_right" disabled placeholder="请选择您的工种类型"
						placeholder-style="color:#CECECE"></u--input>
					<u-icon class="l_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>


				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">地址</view>
					</view>
					<input v-model="form.site" class="i_right" placeholder="请输入地址"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="input_box">
					<view class="bz_box b_flex_c">
						<view>身份证正反面</view>
					</view>
					<view class="upload_box">
						<imgUpload :maxCount="2" v-model="form.images"></imgUpload>
					</view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">户名</view>
					</view>
					<input v-model="form.hm" class="i_right" placeholder="请输入户名"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">银行卡号</view>
					</view>
					<input v-model="form.card" class="i_right" placeholder="请输入银行卡号"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">开户行</view>
					</view>
					<input v-model="form.hu" class="i_right" placeholder="请输入开户行"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">账号</view>
					</view>
					<input v-model="form.account" class="i_right" placeholder="请输入账号"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">密码</view>
					</view>
					<input v-model="form.password" class="i_right" placeholder="请输入密码"
						placeholder-style="color:#C2C7CE"></u--input>
					<view class="l_icon"></view>
				</view>

			</view>


			<view class="sumbit" @click="submit">提交认证</view>
		</view>
		<view class="shen_box" v-else>

			<view class="s_box" v-if="info.status==1">
				<image style="width:260rpx;" :src="imgRemote+'/assets/img/tshz.png'" mode="widthFix"></image>

				<view style="margin-bottom: 80rpx;" class="s_msg">亲! 您的申请正在审核中...</view>

				<view class="sumbit" @click="setTel()">联系客服</view>
			</view>

			<view class="s_box" v-if="info.status==3">
				<image style="width:260rpx;" :src="imgRemote+'/assets/img/tshw.png'" mode="widthFix"></image>

				<view class="s_msg">亲! 您的申请未通过审核。</view>

				<view class="s_look" @click="djShow=true">查看原因</view>

				<view class="sumbit" @click="cx">重新提交</view>
			</view>


			<view class="s_box" v-if="info.status==2">

				<image style="width:260rpx;" :src="imgRemote+'/assets/img/tsht.png'" mode="widthFix"></image>

				<view style="margin-bottom: 80rpx;" class="s_msg">恭喜亲! 您的申请已通过审核。</view>

				<view class="sumbit" @click="toUrl">进入接单中心</view>
			</view>
		</view>
		<!-- <u-select mode="single-column" v-model="groupShow" :list="groupsList" @confirm="confirm"></u-select> -->

		<u-popup :closeable="true" v-model="djShow" mode="center" border-radius="14">
			<view class="dj_box">
				<view>温馨提示</view>
				<view style="margin-top: 10rpx;">{{info.remakes}}</view>
				<view class="dj_btn" @click="djShow=false">确定</view>
			</view>
		</u-popup>

		<u-popup :closeable="true" v-model="groupShow" mode="center" border-radius="14">
			<view class="dj_box">
				<view>请选择</view>
				<u-checkbox-group v-model="groupsCheck" placement="column" activeColor='#e34b0f'>
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in groupsList" :key="index"
						:name="item.value" v-model="item.checked">
						{{item.label}}
					</u-checkbox>
				</u-checkbox-group>

				<view class="dj_btn" @click="setConfirm">确定</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import imgUpload from "@/components/imgUpload.vue";
	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		components: {
			imgUpload
		},
		data() {
			return {
				imgRemote: imgRemote,
				form: {
					name: '',
					mobile: '',
					groups_id: '',
					images: '',
					card: '',
					hm: '',
					site: '',
					hu: '',
					account: '',
					password: ''
				},
				groupsList: [],
				groupsCheck: [],
				groups: '',

				groupShow: false,

				info: {
					id: ''
				},
				stop: false,
				receiving: '',
				visible: false,
				defaultProps1: {
					label: "name",
					value: "id",
					children: "child"
				},
				defaultRegion1: [],
				option: [],
				type: '',
				user: {
					name: ''
				},
				tel: '',
				djShow: false
			}
		},
		onLoad(data) {
			console.log(data);
			if (data.groups_id) {
				this.form.groups_id = data.groups_id;
			}
			if (data.groups) {
				this.groups = data.groups;
				this.stop = true;
			} else {
				this.stop = false;
			}
			if (data.type) {
				this.type = data.type;
			}
			this.getUserInfo();
			//this.getAddress();
			this.getType();
			this.getInfo();
			this.getVal();
			let _ = this;




		},
		onShow() {

			//this.getPlot();

		},
		methods: {
			setConfirm() {

				let text = [];
				let ids = [];

				this.groupsList.forEach(res => {

					if (res.checked) {
						text.push(res.label);
						ids.push(res.value);
					}

				});
				this.groups = text.join(',');
				this.form.groups_id = ids.join(',');
				this.groupShow = false;
			},
			toUrl() {

				let token = uni.getStorageSync('wxToken');
				if (token) {
					uni.navigateTo({
						url: '/pages/wx/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/wx/login'
					});
				}

			},
			setRemark() {
				let _ = this;
				uni.showModal({
					title: '温馨提示',
					content: _.info.remarkes,
					showCancel: false,
					confirmText: '确定',
					success(ress) {
						if (ress.confirm) {}
					}
				});
			},
			setTel() {
				let _ = this;
				_.$project.toPhone(_.tel);
			},
			getVal() {

				this.$get(this.$api.configVal, {
					name: 'tel'
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.tel = data.data.tel;
					}
				});

			},

			mapPage() {
				this.visible = true;
			},
			cx() {
				let info = JSON.parse(JSON.stringify(this.info));
				console.log(info);
				let form = {
					name: info.name,
					mobile: info.mobile,
					groups_id: info.groups_id,
					id: info.id,
					card: info.card,
					hm: info.hm,
					site: info.site,
					hu: info.hu,
					account: info.account,
					password: '',
					images: info.images
				}
				this.groups = info.groups.name;

				this.info.id = '';
				setTimeout(() => {
					this.form = form;
				}, 100)
			},
			getUserInfo() {
				let token = uni.getStorageSync('userToken');
				if (!token) return;

				this.$get(this.$api.userInfo, {
					token: token
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.user = data.data;
						this.form.mobile = data.data.mobile;
					}
				});
			},
			getInfo() {
				if (this.type == 3) return;
				this.$get(this.$api.teamInfo, {
					token: uni.getStorageInfoSync('userToken')
				}, res => {
					this.info = res.data.data;
					if (!res.data.data.mobile) {
						this.form.mobile = res.data.data.users.mobile;
					}

				});
			},
			submit() {
				this.$post(this.$api.teamAdd, this.form, res => {
					if (res.data.code == 1) {

						this.$Toast(res.data.msg);
						if (this.type == 3) {
							uni.navigateBack({});
						} else {
							uni.switchTab({
								url: '/pages/tabar/user'
							});
						}

					} else {
						this.$Toast(res.data.msg);
					}

				});
			},
			confirm(e) {
				this.groups = e[0].label;
				this.form.groups_id = e[0].value;
				this.groupShow = false;
			},
			getType() {
				this.$get(this.$api.teamType, {}, res => {
					this.groupsList = res.data.data;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-radio__label {
			margin-right: 0 !important;
		}

		.u-radio__icon-wrap {
			margin-left: 20rpx;
		}

		.u-checkbox-group {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
	}

	.b_width {
		width: 100%;
	}

	.hui {
		background: #F4F4F4;
		min-height: 100vh;
	}

	.form_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}

	.xx_box {
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.radio {
		display: inline-block;
	}

	.sex_box {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.xx_title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.i_right {
		text-align: right;
		margin-left: auto;
	}

	.l_icon {
		margin-left: 10rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.bz_box {

		box-sizing: border-box;
		padding: 0 0 25rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;

	}

	.i_b_b {
		border-bottom: 1rpx solid #EFEFEF;
	}


	.upload_box {
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
	}

	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.b_red {
		color: red;
	}

	.b_f_w {
		font-weight: bold;
	}

	.xing {
		width: 18rpx;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
	}

	.left {
		width: 26%;
	}

	.tc_box {
		width: 50%;
		text-align: center;
	}

	.sumbit {
		//margin-top: 60rpx;
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #e34b0f;
		color: #fff;
		border-radius: 45rpx;
		margin: 0 auto 0 auto;
	}

	.map_box {
		font-size: 30rpx;
	}

	.shen_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 80vh;
	}

	.right_icon {
		margin-left: auto;
	}

	.msg {
		font-size: 24rpx;
	}

	.s_box {
		text-align: center;
	}

	.s_msg {
		color: #555555;
		margin-top: 80rpx;
	}

	.s_look {
		color: #0F85E0;
		text-decoration: underline;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.dj_box {
		box-sizing: border-box;
		padding: 50rpx 20rpx 20rpx 20rpx;
		background-color: white;
		text-align: center;
		width: 500rpx;
	}

	.dj_btn {
		box-sizing: border-box;
		padding: 15rpx 0;
		border-radius: 25rpx;
		background-color: #E34305;
		color: white;
		font-size: 24rpx;
		margin-top: 30rpx
	}
</style>